import React, { useEffect } from 'react'
import './style.scss'
import { useSelector, useDispatch } from 'umi'
export default function index() {
  const num = useSelector((state: { count: { num: any } }) => state.count.num);
  const cates = useSelector((state: { count: { cates: any } }) => state.count.cates);
  const dispatch = useDispatch();
  const addNum = (n:number) => {
    dispatch({
      type: 'count/add',
      data: n
    })
  }
  useEffect(() => {
    dispatch({
      type: 'count/fetchCates',
      params: {
        a: 10,
        b: 20
      }
    })
  }, [])
  return (
    <div>
      <h2>home页</h2>
      <button onClick={
        () => {
          addNum(5)
        }
      }>num+</button>
      { num }

      <ul>
        {
          cates.map((cate: { id: React.Key | null | undefined; name: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal | null | undefined; icon: string | undefined; }) => (
            <li key={cate.id}>
              <h4>{cate.name}</h4>
              <img src={cate.icon} alt="" width={100}/>
            </li>
          ))
        }
        
      </ul>
    </div>
  )
}
